<template>
	<view class="home">
		<view class="flex align-center justify-between">
			<view :class="tabid==item.id?'tabbtn_active':'tabbtn'" v-for="(item,index) in tablist" :key="index"
				@click="choseTab(item.id)">
				{{item.level_name}}
			</view>
		</view>
		<view class="activebg margin-top-35">
			<ty-swiper-home :list="detail.carousel_images" height='360' radius='50'></ty-swiper-home>
		</view>
		<view class="text-28 text-66 margin-top-40 line-40">
			<ty-text-rich-text :html="detail.criteria"></ty-text-rich-text>
		</view>
		<view class="memberimg position-relative" v-for="(item,index) in detail.video_url" :key="index">
			<video :src="item" class="memberimg position-relative margin-top-30" danmu-btn controls></video>
			<view class="memberimg position-absolute" style="z-index: 9;top: 0;left: 0;" @click="choseSp(item)">
			</view>
		</view>
		<!-- 视频弹窗 -->
		<view class="" v-if="video_layer_show">
			<ty-layer-videodetail :videourl='video_url' @lvshow="getoff"></ty-layer-videodetail>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [],
				tabid: 1,
				detail: "",
				video_url: "",
				video_layer_show: false
			}
		},
		onReady() {
			this.rq.getData('Upgrade/upgrade_list').then(res => {
				if (res.code == 1) {
					this.tablist = res.data
					this.tabid = res.data[0].id
					this.getdetail()
				}
			})
		},
		methods: {
			choseTab(id) {
				this.tabid = id
				this.getdetail()
			},
			getdetail() {
				this.rq.getData('Upgrade/upgrade_info', {
					id: this.tabid
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
					}
				})
			},
			choseSp(i) {
				this.video_url = i
				this.video_layer_show = true
			},
			getoff() {
				this.video_layer_show = false
			}
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 40rpx 30rpx;
	}

	.tabbtn {
		width: 224rpx;
		height: 80rpx;
		background: #E0E0E0;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		font-size: 28rpx;
		color: #111111;
		line-height: 80rpx;
		text-align: center;
	}

	.tabbtn_active {
		width: 224rpx;
		height: 80rpx;
		background: #101010;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		font-size: 28rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
	}

	.memberimg {
		width: 100%;
		height: 360rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
</style>